<template>
  <div class="home">
    <canvas id="box"></canvas>
  </div>
</template>

<script>
import { Leafer, Image } from "leafer-ui";
import "@leafer-in/viewport"; // 导入视口插件

export default {
  name: "HomeView",
  components: {},
  mounted() {
    const leafer = new Leafer({
      view: "box",
      type: "design",
      wheel: { zoomMode: true },
    });

    const image = new Image({
      url: "./test.svg",
      draggable: true,
      height: 800,
      pixelRatio: 3,
    });

    leafer.add(image);
  },
};
</script>
<style scoped>
.home {
  width: 90vw;
  height: 90vh;
}
#box {
  border: 1px solid #c56565;
}
</style>
